@(user: User, sheet: com.smartsheet.api.models.Sheet, rows: List[com.smartsheet.api.models.Row])

@main(user) {

	<section class="content">

  		<form role="form" method="GET" action="/selectAttachment">
			<div class="radio">
			  <label>
			    <input type="radio" name="option" checked="checked" id="attachmentFromList" value="attachmentFromList">
			    	<span class="help-block">Select an attachment from the list</span>
			  </label>
			</div>

			<div class="radio">
			  <label>
			    <input type="radio" name="option" id="attachmentFromRow" value="attachmentFromRow">
			    	<span class="help-block">Or choose a row</span>
			  </label>
			</div>

			@if(rows.size > 0) {
   				<div class="row" id="rowList">
   					<div class="col-md-11 col-sm-11 col-xs-10 col-md-offset-1 col-sm-offset-1">
				        <table class="table table-striped table-bordered table-hover table-condensed">
				            <thead>
				            <tr>	<!-- only display first 5 columns -->
				            	@for((col, i) <- sheet.getColumns().zipWithIndex) {
				            		@if(i<6) {  
				            			<th>@col.getTitle()</th>
				            		}
				            	}
				            </tr>
				            </thead>
				            <tbody>		<!-- only display first 5 columns -->
				            @for((row,i) <- rows.zipWithIndex) {
				            	
								<tr class="sheetrow" rowid="@row.getId()" >
				            	@for((cell,j) <- row.getCells().zipWithIndex) {
				            		@if(i<6) {
				                    	<td>@cell.getDisplayValue()</td>
				                     }
				                }
				                </tr>
				            }
				            </tbody>
				        </table>
			        </div>
				</div>
			} else {
				<p>No row in the selected sheet</p>
			}
			
			<div class="row">
				<div class="col-md-offset-8 col-sm-offset-7  col-xs-offset-6">
					<button type="submit" class="btn btn-primary">Next</button>
				</div>
			</div>
		</form>
		
	</section>	<!-- section -->

	<script type="text/javascript">

		$(document).ready(function() {

			// when attachment is selected from the list, move the checkbox selection
			$(document).on('change', 'select[name=attachmentIdFromList]', function() {
				$('input#attachmentFromList').prop('checked', true);
			});
			
			// handle table row click and attachment selection from popup
			 $(document).on('click', "tr.sheetrow", function() {

			});
		});
	</script>
}
